<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { reactive } from "vue";
defineOptions({
  name: "Member"
});
const tableData = [
  {
    date: "2014-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 0,
    isAuth: 1,
    avatar:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  },
  {
    date: "2014-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 1,
    isAuth: 1,
    avatar:
      "https://uploadfile.bizhizu.cn/up/0a/ba/6d/0aba6d329d46b879e4f9abab7a66f931.jpg"
  },
  {
    date: "2014-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    sex: 1,
    isAuth: 1,
    avatar:
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
  },
  {
    date: "2023-3-10",
    name: "Tom",
    address: "湖北省武汉市东西湖区",
    sex: 0,
    isAuth: 1,
    avatar:
      "https://uploadfile.bizhizu.cn/up/0a/ba/6d/0aba6d329d46b879e4f9abab7a66f931.jpg"
  }
];

const srcList = [];
tableData.forEach(t => {
  srcList.push(t.avatar);
});
const userState = [
  {
    value: 0,
    label: "正常"
  },
  {
    value: 1,
    label: "封禁"
  }
];
const searchDto = reactive({
  userId: "",
  nickName: "",
  state: null
});
</script>

<template>
  <el-card>
    <el-row style="margin-bottom: 20px" :gutter="20">
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="id"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="昵称"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchDto.userId"
          placeholder="邮箱"
          :prefix-icon="Search"
        />
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchDto.state" placeholder="状态">
          <el-option
            v-for="item in userState"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="头像">
        <template #default="scope">
          <el-image
            :src="scope.row.avatar"
            fit="scale-down"
            :preview-src-list="srcList"
            preview-teleported
            hide-on-click-modal
          />
        </template>
      </el-table-column>

      <el-table-column align="center" prop="address" label="ID" />
      <el-table-column align="center" prop="name" label="昵称" />
      <el-table-column align="center" label="性别">
        <template #default="scope">
          <el-tag :type="scope.row.sex === 1 ? 'success' : 'danger'">{{
            scope.row.sex === 1 ? "女" : "男"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="邮箱" />
      <el-table-column align="center" prop="address" label="手机号" />
      <el-table-column align="center" prop="address" label="粉丝数量" />
      <!-- <el-table-column align="center" prop="address" label="三方渠道" />
      <el-table-column align="center" prop="address" label="openId" /> -->
      <el-table-column align="center" label="是否认证">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isAuth"
            :active-value="0"
            :inactive-value="1"
            inline-prompt
            disabled
            active-text="已认证"
            inactive-text="未认证"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="账号状态" />
      <el-table-column align="center" prop="address" label="注册时间" />
      <el-table-column label="操作" align="center" width="200px">
        <template #default="scope">
          <el-button size="small">Edit</el-button>
          <el-button size="small" type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :total="1000"
    />
  </el-card>
</template>

<style lang="scss" scoped>
.main-content {
  margin: 5px !important;
}
.el-pagination {
  justify-content: flex-end !important;
}
</style>
